<template>
    <!-- 顶部导航栏组件 -->
    <el-header>
        <!-- 左侧导航控制区 -->
        <div class="left">
            <!-- 折叠/展开侧边栏按钮 -->
            <el-icon @click="handleCollapsed">
                <Menu></Menu> <!-- 菜单图标 -->
            </el-icon>
            <!-- 系统名称 -->
            <span style="margin-left: 10px;">就业服务系统</span>
        </div>

        <!-- 右侧用户操作区 -->
        <div class="right">
            <!-- 欢迎语，显示当前登录用户名（来自Vuex状态） -->
            <span>欢迎 {{ $store.state.userInfo.username }} 回来</span>

            <!-- 用户操作下拉菜单 -->
            <el-dropdown>
                <span class="el-dropdown-link">
                    <el-icon size="25"><User /></el-icon> <!-- 用户图标 -->
                    <el-icon class="el-icon--right">
                        <arrow-down /> <!-- 下拉箭头图标 -->
                    </el-icon>
                </span>
                <!-- 下拉菜单内容 -->
                <template #dropdown>
                    <el-dropdown-menu>
                        <!-- 个人中心菜单项，点击跳转路由 -->
                        <el-dropdown-item @click="handleCenter">个人中心</el-dropdown-item>
                        <!-- 退出登录菜单项，点击执行退出逻辑 -->
                        <el-dropdown-item @click="handleLogout">退出</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </el-header>
</template>

<script setup>
// 引入Vuex钩子获取全局状态
import { useStore } from 'vuex'
// 引入Vue Router钩子进行路由跳转
import { useRouter } from 'vue-router'
// 引入所需的Element Plus图标组件
import { Menu, User } from '@element-plus/icons-vue'

// 初始化Vuex仓库实例
const store = useStore()
// 初始化路由实例
const router = useRouter()

/**
 * 折叠/展开侧边栏的处理函数
 * 触发Vuexmutation修改折叠状态
 */
const handleCollapsed = () => {
    store.commit("changeCollapsed")
}

/**
 * 跳转至个人中心的处理函数
 * 使用路由push方法导航到/center路径
 */
const handleCenter = () => {
    router.push("/center")
}

/**
 * 退出登录的处理函数
 * 1. 清除本地存储的token
 * 2. 触发Vuexmutation清除用户信息
 * 3. 路由跳转至登录页面
 */
const handleLogout = () => {
    localStorage.removeItem("token")
    store.commit("clearUserInfo")
    router.push("/login")
}
</script>

<style lang="scss" scoped>
/* 导航栏整体样式 */
.el-header{
    background-color: #2d3a4b; /* 背景色 */
    color: white; /* 文字颜色 */
    width: 100%; /* 宽度占满屏幕 */
    height: 60px; /* 固定高度 */
    line-height: 60px; /* 行高与高度一致，实现垂直居中 */
    display: flex; /* 使用Flex布局 */
    justify-content: space-between; /* 左右内容两端对齐 */
    align-items: center; /* 垂直方向居中 */
}

/* 左右两侧内容容器样式 */
.left, .right{
    display: flex; /* 子元素横向排列 */
}

/* 左侧图标样式 */
.left{
    i{
        margin: auto; /* 图标垂直居中 */
    }
}

/* 右侧下拉菜单样式 */
.right{
    .el-dropdown{
        margin: auto; /* 下拉菜单垂直居中 */
    }
}
</style>